<template>
  <div class="maintainance-record-container">
    <div class="search-box">
      <van-dropdown-menu active-color="#3378FF">
        <van-dropdown-item
          v-model="status"
          :options="statusOption"
          @change="selectStatus"
        />
      </van-dropdown-menu>
      <form
        action="/"
        class="form-search"
      >
        <van-search
          v-model="searchKey"
          shape="round"
          placeholder="搜索工单编号"
          clearable
          @search="reloadData"
          @clear="reloadData"
        />
      </form>
    </div>

    <ul
      class="record-list scroll-box"
      v-if="recordList.length"
      @scroll="scrollFn"
    >
      <li
        v-for="item in recordList"
        :key="item.id"
        @click="jumpDetail(item.id)"
      >
        <div class="item-left">
          <i class="iconfont iconweixiugongdan"></i>
        </div>
        <div class="item-right">
          <div class="item-right-top">
            <span class="work-order-num">工单{{ item.order_no }}</span>
            <p class="status-box">
              <span
                class="status-icon create"
                v-if="item.status === 1"
              >
                <i class="iconfont iconbianji"></i>
              </span>
              <span
                class="status-icon accept"
                v-if="item.status === 2"
              >
                <i class="iconfont iconshangyi"></i>
              </span>
              <span
                class="status-icon send"
                v-if="item.status === 3"
              >
                <i class="iconfont iconxiayi"></i>
              </span>
              <span
                class="status-icon complete"
                v-if="item.status === 4"
              >
                <i class="iconfont icontianjiawancheng"></i>
              </span>
              <span
                class="status-icon cancel"
                v-if="item.status === 5"
              >
                <i class="iconfont iconguanbi-01"></i>
              </span>
              {{ coverStatus(item.status) }}
            </p>
          </div>
          <p class="item-right-center">
            {{ item.maintain_plan }}
          </p>
          <div class="item-right-bottom">
            通知时间：{{ item.updated_time }}
          </div>
        </div>
      </li>

      <!-- 加载状态 -->
      <div
        class="loading-box"
        v-if="loading"
      >
        <p
          class="finished"
          v-if="finished"
        >没有更多了</p>
        <div
          class="loading"
          v-else
        >
          <van-loading size="14px">加载中...</van-loading>
        </div>
      </div>
    </ul>

    <div
      class="no-data-box"
      v-if="noDataState"
    >暂无数据</div>
  </div>
</template>

<script>
import { Search, DropdownMenu, DropdownItem, Loading } from 'vant';
import { getOrderList } from '@/api/deviceManage.js';

export default {
  name: 'MaintainanceRecord',
  components: {
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Loading.name]: Loading
  },
  data() {
    return {
      searchKey: '',
      status: '',
      statusOption: [],
      recordList: [],
      pageIndex: 1,
      pageSize: 10,
      loading: false, //加载状态
      finished: false, //全部加载
      noDataState: false //无数据显示状态
    };
  },
  created() {
    console.log('MaintainanceRecord');
    this.createStatusData();
    this.getOrderList();
  },
  methods: {
    // 创建状态选项
    createStatusData() {
      let statusArr = ['全部状态', '已创建', '已派单', '已接单', '已完成', '已取消'];
      statusArr.map((item, index) => {
        this.statusOption.push({
          text: item,
          value: index === 0 ? '' : index
        });
      });
    },
    // 获取列表数据
    getOrderList() {
      getOrderList({
        order_type: 2,
        order_no: this.searchKey,
        status: this.status,
        device_id: this.$route.query.id,
        page: this.pageIndex,
        page_size: this.pageSize
      }).then(res => {
        this.loading = false;
        let data = res.data.list || [];
        this.recordList = this.recordList.concat(data);

        // 无数据
        if (this.recordList.length <= 0 && this.pageIndex === 1) {
          this.noDataState = true;
          this.loading = false;
          this.finished = false;
        }

        // 全部加载完成
        if (this.pageIndex > 1 && res.data.list.length < this.pageSize) {
          this.finished = true;
        }
      });
    },
    // 状态转换为文字
    coverStatus(status) {
      // 工单状态 1已创建 2已派单 3已接单 4已完成 5已取消
      let obj = {
        1: '已创建',
        2: '已派单',
        3: '已接单',
        4: '已完成',
        5: '已取消'
      };
      return obj[status];
    },
    // 选择状态
    selectStatus(value) {
      this.status = value;
      this.reloadData();
    },
    // 重载数据
    reloadData() {
      this.loading = false;
      this.finished = false;
      this.noDataState = false;
      this.pageIndex = 1;
      this.recordList = [];
      this.getOrderList();
    },
    // 滚动事件
    scrollFn(e) {
      let scrollTop = document.querySelector('.record-list').scrollTop;
      let clientHeight = document.querySelector('.record-list').clientHeight;
      let scrollHeight = document.querySelector('.record-list').scrollHeight;

      if (scrollTop + clientHeight >= scrollHeight) {
        this.$debounceFn(this.onLoadMore, 300);
      }
    },
    // 加载更多
    onLoadMore() {
      this.loading = true;
      if (!this.finished) {
        // 异步更新数据
        setTimeout(() => {
          this.pageIndex++;
          this.getOrderList();
        }, 500);
      }
    },
    // 维修记录详情
    jumpDetail(id) {
      if (this.$checkBtnPermission('maintenanceCenter:workOrderManage:list:detail')) {
        localStorage.setItem('deviceDetailTab', '保养记录');
        this.$router.push({
          name: 'workOrderManageDetail',
          query: {
            id,
            from: 'other'
          }
        });
      } else {
        this.$toast(this.$store.state.noDetailPermissionText);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.maintainance-record-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .search-box {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 1.44rem;
    border-bottom: 1px solid var(--border-color);

    .van-dropdown-menu {
      height: 100%;
      background-color: #fff;

      ::v-deep .van-dropdown-menu__bar {
        height: 100%;
        box-shadow: unset;
      }
    }

    .van-search {
      flex: 1;
    }
  }

  .record-list {
    flex: 1;
    padding-bottom: 0.213333rem;

    li {
      display: flex;
      align-items: center;
      margin-top: 0.213333rem;
      padding: 0.426667rem;
      background-color: #fff;

      .item-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.12rem;
        height: 1.12rem;
        margin-right: 0.32rem;
        border-radius: 50%;
        background-color: #f0f9eb;

        i {
          font-size: 0.586667rem;
          color: var(--color-green);
        }
      }

      .item-right {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 0.32rem;

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 1px;
          height: 100%;
          background-color: var(--border-color);
        }

        .item-right-top {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .work-order-num {
            font-size: 0.4rem;
          }

          .status-box {
            display: flex;
            align-items: center;
            font-size: 0.32rem;

            .status-icon {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 0.426667rem;
              height: 0.426667rem;
              margin-right: 0.106667rem;
              border-radius: 50%;
              color: #fff;
              background-color: #54b7ff;

              i {
                font-size: 0.266667rem;
              }

              &.create {
                background-color: #54b7ff;
              }

              &.send {
                background-color: #c5df5d;
              }

              &.accept {
                background-color: #d695f4;
              }

              &.complete {
                background-color: #81e4a9;
              }

              &.cancel {
                background-color: #f4a476;
              }
            }

            color: var(--color-deep-gray);
          }
        }

        .item-right-center {
          margin: 0.266667rem 0;
          line-height: 0.533333rem;
          color: var(--color-deep-gray);
          font-size: 0.346667rem;
        }

        .item-right-bottom {
          font-size: 0.32rem;
          color: var(--color-gray);
        }
      }
    }
  }

  .no-data-box {
    padding: 0.32rem 0.426667rem;
    text-align: center;
    color: var(--color-gray);
    font-size: 0.373333rem;
  }
}
</style>